import CopyToClipboard from 'react-copy-to-clipboard';
import { message } from 'antd';
import classNames from 'classnames';
import { FC } from 'react';
import { IconFont } from '@/components/SelfIcon';

export interface CopyableIconProps {
  name: string;
  code: string;
  justCopied: string | null;
  onCopied: (type: string, text: string) => any;
}

const CopyableIcon: FC<CopyableIconProps> = ({ name, code, justCopied, onCopied, children }) => {
  const className = classNames({
    copied: justCopied === name,
  });
  const onCopy = (text: string, result: boolean) => {
    if (result) {
      onCopied(name, text);
    } else {
      message.error('Copy icon name failed, please try again.');
    }
  };

  return (
    <CopyToClipboard text={code} onCopy={onCopy}>
      <li className="icon-item">
        <div className="icon-wrap">
          <IconFont type={`icon-${code}`} />
        </div>
        <span className="icon-name" title={name}>
          {name}
        </span>
        <span className="icon-code icon-code-show" title={code}>
          {code}
        </span>
      </li>
    </CopyToClipboard>
  );
};

export default CopyableIcon;
